<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findById, save } from "@/api/postInfo"
import { useAdminStore } from '@/stores/admin'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Edit, User, Money, Check, Close } from '@element-plus/icons-vue'

const router = useRouter()
const adminStore = useAdminStore()

// 设置请求头的token 和对应的值
const headers = {
  'token': adminStore.getToken
}

// 校验规则
const rules = reactive({
  name: [
    { required: true, message: '请输入岗位名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度为2-50', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请输入岗位描述', trigger: 'blur' },
    { min: 10, max: 500, message: '长度至少10个字符', trigger: 'blur' },
  ],
  baseSalary: [
    { required: true, message: '请输入基础薪资', trigger: 'blur' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  requirements: [
    { required: true, message: '请输入岗位需求', trigger: 'blur' },
    { min: 10, max: 500, message: '长度至少10个字符', trigger: 'blur' },
  ]
})

// 数据
const ruleForm = reactive({})
const route = useRoute()
const ruleFormRef = ref()

onMounted(() => {
  ruleForm.positionId = route.query.id
  if (ruleForm.positionId) {
    findById(ruleForm.positionId).then((res) => {
      Object.assign(ruleForm, {
        name: res.data.name,
        type: res.data.type,
        description: res.data.description,
        baseSalary: res.data.baseSalary,
        requirements: res.data.requirements,
        status: res.data.status,
        type: res.data.type
      })
    })
  }
})

const handleSubmitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      save(ruleForm).then((res) => {
        ElMessage({
          message: res.message,
          type: 'success'
        })
        router.push({ path: "/postInfo/page" })
      })
    }
  })
}

const handleBack = () => {
  router.back()
}
</script>

<template>
  <div class="form-wrapper">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Edit /></el-icon>
          <span class="header-title">{{ ruleForm.positionId ? '修改' : '新增' }}岗位信息</span>
        </div>
      </template>
      
      <el-form 
        ref="ruleFormRef" 
        :model="ruleForm" 
        :rules="rules" 
        label-width="100px"
        label-position="top"
        class="form-content"
      >
        <div class="form-grid">
          <!-- 岗位名称 -->
          <el-form-item label="岗位名称" prop="name" class="form-item">
            <el-input 
              v-model="ruleForm.name" 
              placeholder="如：前端开发工程师"
              clearable
              :prefix-icon="User"
              size="large"
            />
          </el-form-item>
          
          <!-- 岗位类型 -->
          <el-form-item label="岗位类型" prop="type" class="form-item">
            <el-input 
              v-model="ruleForm.type" 
              placeholder="如：技术类"
              clearable
              size="large"
            />
          </el-form-item>
          
          <!-- 岗位描述 -->
          <el-form-item label="岗位描述" prop="description" class="form-item full-width">
            <el-input 
              v-model="ruleForm.description" 
              type="textarea"
              :rows="4"
              placeholder="详细描述岗位职责和工作内容"
              show-word-limit
              maxlength="500"
            />
          </el-form-item>
          
          <!-- 基础薪资 -->
          <el-form-item label="基础薪资" prop="baseSalary" class="form-item">
            <el-input 
              v-model="ruleForm.baseSalary" 
              placeholder="请输入数字"
              clearable
              :prefix-icon="Money"
              size="large"
            >
              <template #append>元/月</template>
            </el-input>
          </el-form-item>
          
          <!-- 岗位状态 -->
          <el-form-item label="岗位状态" prop="status" class="form-item">
            <el-switch
              v-model="ruleForm.status"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
              inline-prompt
              active-color="#13ce66"
              inactive-color="#ff4949"
              size="large"
            />
          </el-form-item>
          
          <!-- 岗位需求 -->
          <el-form-item label="岗位需求" prop="requirements" class="form-item full-width">
            <el-input 
              v-model="ruleForm.requirements" 
              type="textarea"
              :rows="4"
              placeholder="列出任职要求和技能需求"
              show-word-limit
              maxlength="500"
            />
          </el-form-item>
        </div>
        
        <!-- 按钮 -->
        <div class="form-actions">
          <el-button 
            type="primary" 
            @click="handleSubmitForm(ruleFormRef)"
            :icon="Check"
            size="large"
          >
            保存信息
          </el-button>
          <el-button 
            @click="handleBack"
            :icon="Close"
            size="large"
          >
            返回列表
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f5f7fa;
}

.form-card {
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.header-icon {
  margin-right: 12px;
  font-size: 24px;
  color: var(--el-color-primary);
}

.header-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.form-content {
  padding: 2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.form-item {
  margin-bottom: 0;
}

.form-item :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
  font-size: 14px;
}

.full-width {
  grid-column: span 2;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:hover),
:deep(.el-textarea__inner:hover) {
  border-color: var(--el-color-primary-light-5);
}

:deep(.el-input__prefix),
:deep(.el-input__suffix) {
  display: flex;
  align-items: center;
}

:deep(.el-button) {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .full-width {
    grid-column: span 1;
  }
  
  .form-wrapper {
    padding: 1rem;
  }
  
  .form-content {
    padding: 1.5rem;
  }
}
</style>